<template>
  <div id="app" class="fire-safety" tabindex="0">
    <!-- 头部导航 -->
    <van-nav-bar left-arrow title="消防安全巡检" @click-left="comeBack" left-text="返回">
      <template #title>
        <van-icon name="arrow-left" @click="prevMonthFn"></van-icon>
        <span style="margin: 0 5vw;color:#bb5a09;font-size: 1.5rem;" @click="calendar.show = true">{{ queryParam.curMonth }}</span>
        <van-icon name="arrow" @click="nextMontFnh" />
      </template>
      <template #right>
        <van-icon size="1.5rem" name="plus" @click="() => showInspectPopFn()"></van-icon>
      </template>
    </van-nav-bar>

    <!-- 查询框 -->
    <div style="display: flex;">
      <van-dropdown-menu style="width: 60vw;">
        <van-dropdown-item :title="typeFilter.types.length == 0 ? '选择位置' : typeFilter.types.map(item => item.name).join(SPLIT_COMMA)">
          <van-checkbox-group v-model="typeFilter.types">
            <template v-for="typeItem in typeFilter.data">
              <van-checkbox style="margin-bottom: 2vh" :name="typeItem" shape="square">{{ typeItem.name }}</van-checkbox>
            </template>
          </van-checkbox-group>
        </van-dropdown-item>
      </van-dropdown-menu>
      <van-search style="width: 38vw" v-model="queryParam.keyLike" placeholder="请输入编号" @search="refreshFireSafetyInspectionDataFn"></van-search>
    </div>

    <!-- 列表 div必须设置高度自动滚动-->
    <div style="height: 86vh;overflow: auto">
      <van-pull-refresh  v-model="loadData.refresh" success-text="刷新成功" @refresh="refreshFireSafetyInspectionDataFn">
        <van-list v-model="loadData.loading" :offset="1" :finished="loadData.finished" finished-text="已全部加载" :immediate-check="false" @load="loadNextPageDataFn">
          <van-swipe-cell v-for="row in inspectionData">
            <template #default>
              <div :class="renderCardFn(row)">
                <div style="flex: 0 0 25vw">
                  <view-pic-thumb :original-data="row" :size="{width: '20vw',height: '20vw'}" :first-flag="true" @view="viewPicFn"></view-pic-thumb>
                </div>
                <div style="flex: 1">
                  <div style="display: flex;justify-content: space-between">
                    <div>
                      <span style="color: #1989fa;font-size: 1.2rem;font-weight: bolder">{{ energyMeterTypeEnumFn(row.type) }}</span>
                    </div>
                    <div>
                      <span style="color: #1989fa;font-size: 1.2rem;font-weight: bolder">{{ row.equNo }}</span>
                    </div>
                  </div>
                  <div>
                    <span>巡检备注:</span>
                    <span>{{ row.optRemark }}</span>
                  </div>
                  <div style="display: flex; justify-content: space-between;align-items: flex-end;">
                    <div style="margin-right: 5vw;">
                      <span>{{ row.optAt }}</span>
                    </div>
                    <div style="margin-right: 2vw;">
                      <span>{{ row.optName }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </template>
            <template #right>
              <div>
                <van-button type="warning" size="small" @click="showInspectPopFn(row)">编辑</van-button>
              </div>
            </template>
          </van-swipe-cell>
        </van-list>
      </van-pull-refresh>
    </div>

    <!-- 更改弹窗 -->
    <van-popup v-model="change.show" style="width: 96vw;" :close-on-click-overlay="false">
      <fire-safety-inspect v-if="change.show" :original-inspection="change.inspection" @close="closeFn" @view="viewPicFn"></fire-safety-inspect>
    </van-popup>

    <!-- 日历选择 -->
    <van-calendar v-model="calendar.show" :min-date="calendar.minDate" :max-date="calendar.maxDate" :show-title="false" :show-subtitle="false" :show-confirm="false" @confirm="selectMonthFn"></van-calendar>

    <!-- 查看图片 -->
    <view-pic ref="viewPicRef"></view-pic>
  </div>
</template>

<script>
import dayjs from "dayjs";
import {comeBack, deepCopy} from "@/utils";
import {ENERGY_METER_TYPE, energyMeterTypeEnumFn, SPLIT_BLANK, SPLIT_COMMA, SPLIT_SPACE} from "@/api/enum";
import FireSafetyInspect from "@/views/energy-consumption/fire-safety/fire-safety-inspect";
import {loadFireSafetyInspectionData} from "@/views/energy-consumption/energy-consumption";
import {loadPic, loadPicThumb} from "@/components/file-upload/upload_file";
import ViewPic from "@/components/view-pic";
import ViewPicThumb from "@/components/view-pic-thumb";

export default {
  name: "fireSafety",
  components: {ViewPicThumb, ViewPic, FireSafetyInspect},
  data() {
    return {
      SPLIT_COMMA, SPLIT_BLANK,

      /* 日历 */
      calendar: {
        show: false,
        minDate: new Date(dayjs().subtract(1, "year")),
        maxDate: new Date(),
      },

      /* 查询条件 */
      queryParam: {
        curMonth: dayjs().format("YYYY-MM"),
        types: SPLIT_BLANK,
        keyLike: SPLIT_BLANK,
        pageNum: 1,
        pageSize: 6,
        totalRow: 0,
        beginAt: dayjs().set("date", 1).format("YYYY-MM-DD"),
        endAt: dayjs().add(1, "month").set("date", 1).format("YYYY-MM-DD"),
      },

      /* 类型 */
      typeFilter: {
        show: false,
        data: [],
        types: [],
      },

      /* 列表 */
      loadData: {
        refresh: true,
        loading: true,
        finished: false,
      },
      timer: null,
      inspectionData: [],

      /* 图片预览 */
      viewPic: {
        show: false,
        urls: []
      },

      /* 变更 */
      change: {
        show: false,
        inspection: null,
      }
    }
  },
  mounted() {
    const that = this;
    if (process.env.NODE_ENV === "production") {
      that.$nextTick(() => {
        that.initFn();
      });
    } else {
      window.apiready = function () {
        that.initFn();
      };
    }
  },
  methods: {
    comeBack, energyMeterTypeEnumFn,

    /* 初始化 */
    initFn() {
      const that = this;
      that.typeFilter.data.splice(0, that.typeFilter.data.length);
      Object.keys(ENERGY_METER_TYPE).forEach(k => {
        that.typeFilter.data.push({
          name: ENERGY_METER_TYPE[k],
          value: String(k),
        });
      });

      that.refreshFireSafetyInspectionDataFn();
    },

    /* 前一个月 */
    prevMonthFn() {
      const that = this;
      that.queryParam.curMonth = dayjs(that.queryParam.curMonth).subtract(1, "month").format("YYYY-MM");
    },
    /* 后一个月 */
    nextMontFnh() {
      const that = this;
      that.queryParam.curMonth = dayjs(that.queryParam.curMonth).add(1, "month").format("YYYY-MM");
    },
    /* 选择月份 */
    selectMonthFn(date) {
      const that = this;
      that.queryParam.curMonth = dayjs(date).format("YYYY-MM");
      that.queryParam.beginAt = dayjs(date).set("date", 1).format("YYYY-MM-DD");
      that.queryParam.endAt = dayjs(date).add(1, "month").set("date", 1).format("YYYY-MM-DD");
      that.calendar.show = false;
    },

    /* 关闭 */
    closeFn(reload) {
      const that = this;
      that.change.show = false;
      if(reload) {
        that.refreshFireSafetyInspectionDataFn();
      }
    },

    /* 刷新订单数据 */
    refreshFireSafetyInspectionDataFn() {
      let that = this;
      that.queryParam.pageNum = 1;
      that.queryParam.types = that.typeFilter.types.map(type => type.value).join(SPLIT_COMMA);

      that.loadData.refresh = true;   //下拉
      that.loadData.loading = true;
      that.loadData.finished = false;   //列表
      that.inspectionData.splice(0, that.inspectionData.length);
      that.loadFireSafetyInspectionDataFn();
    },
    /* 上拉加载下一页 */
    loadNextPageDataFn() {
      let that = this;
      that.$toast.loading("加载中...");
      that.queryParam.pageNum++;
      that.loadFireSafetyInspectionDataFn();
    },

    /* 加载数据 */
    loadFireSafetyInspectionDataFn() {
      const that = this;
      loadFireSafetyInspectionData(that.queryParam, resData => {
        if(resData.code || resData.code == 0) {
          that.$toast.fail({
            type: "fail",
            message: resData.msg,
            onClose: () => {
              that.loadData.refresh = false;    //下拉刷新加载完成
              that.loadData.loading = false;
              that.loadData.finished = true;
            }
          });
          return;
        }
        resData.list.forEach(inspection => {
          that.inspectionData.push(inspection);
        });
        that.$nextTick(() => {    //必须在视图刷新后置空
          that.loadData.refresh = false;    //下拉刷新加载完成
          that.loadData.loading = false;
          if(resData.totalPage == that.queryParam.pageNum) {
            that.loadData.finished = true;
          }
        });
      });
    },

    /* 渲染 */
    renderCardFn(inspection) {
      let cls = "card";
      if(inspection.status == 1) {
        cls += (SPLIT_SPACE + "un-inspect");
      } else if(inspection.status == 2) {
        cls += (SPLIT_SPACE + "to-deal");
      } else if(inspection.status == 3) {
        cls += (SPLIT_SPACE + "ok");
      }
      return cls;
    },

    /* 查看图片 */
    viewPicFn(row) {
      const that = this;
      that.$refs.viewPicRef.viewPicFn(row);
    },

    /* 显示弹窗 */
    showInspectPopFn(row) {
      const that = this;
      that.change.inspection = deepCopy(row);
      that.change.show = true;
    },
  }
}
</script>

<style lang="scss" scoped>
.fire-safety {
  ::v-deep .van-search {
    padding: 0;
    z-index: 1;
  }
  ::v-deep .van-list {
    display: flex;
    flex-direction: column;
    align-items: center;

    .card {
      width: 92vw;
      padding: 1vh 2vw;
      background-color: white;
      margin-top: 1.5vh;
      margin-right: 3vw;
      margin-bottom: 1.5vh;
      box-shadow: 6px 6px 6px #888888;
      display: flex;
      border-radius: 8px;
    }

    .un-inspect {
      box-shadow: 6px 6px 6px #ff0000;
    }
    .to-deal {
      box-shadow: 6px 6px 6px #fdb126;
    }
    .ok {
      box-shadow: 6px 6px 6px #41d249;
    }
  }
}
</style>